<template>
  <div>
    <el-form label-position="left" label-width="70px" :model="identity">
      <el-form-item label="姓名">
        <div class="my-flex">
          <el-input
            v-model="identity.name"
            style="width: 205px"
            placeholder="输入你的姓名"
            @blur="isLegalName = verifyName(identity.name)"
          ></el-input>
          <div v-if="!isLegalName" style="margin-left: 10px; color: red">
            请输入合法的姓名
          </div>
        </div>
      </el-form-item>
      <el-form-item label="性别">
        <el-select v-model="identity.sex" placeholder="请选择">
          <el-option
            v-for="item in sexOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="身份证号">
        <div class="my-flex">
          <el-input
            v-model="identity.idcard"
            style="width: 205px"
            placeholder="输入你的身份证号"
            @blur="isLegalIdCard = verifyIdCard(identity.idcard)"
          ></el-input>
          <div v-if="!isLegalIdCard" style="margin-left: 10px; color: red">
            请输入合法的身份证号
          </div>
        </div>
      </el-form-item>
      <el-form-item label="身份证" style="max-height: 150px; overflow: auto">
        <el-upload
          action="/api/oss/uploadIdentityImg"
          :on-remove="handleCardImgRemove"
          :on-success="uploadIdCardImgsSuccess"
          :file-list="idcardfiles"
          list-type="picture"
        >
          <div style="display: flex">
            <el-button size="small" type="primary">点击上传</el-button>
            <div slot="tip" style="margin-left: 10px; color: #606226">
              上传身份证，包含正反面
            </div>
          </div>
        </el-upload>
      </el-form-item>
      <el-form-item label="资格证书" style="max-height: 150px; overflow: auto">
        <el-upload
          action="/api/oss/uploadIdentityImg"
          :on-remove="handleCertificateRemove"
          :on-success="uploadCertificatesSuccess"
          :file-list="certificatesfiles"
          list-type="picture"
        >
          <div style="display: flex">
            <el-button size="small" type="primary">点击上传</el-button>
            <div slot="tip" style="margin-left: 10px; color: #606226">
              上传资格证书
            </div>
          </div>
        </el-upload>
      </el-form-item>
      <el-form-item label="操作">
        <div style="display: flex">
          <el-button type="primary" @click="submitApply"> 提交申请</el-button>
        </div>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  created() {},
  computed: {
    submitData() {
      let identity = {};
      identity.userid = localStorage.getItem("userId");
      identity.name = this.identity.name;
      identity.sex = this.identity.sex;
      identity.birth = this.birthday;
      identity.idcard = this.identity.idcard;

      identity.idcardimgs = "";
      this.identity.idcardimgs.forEach((item) => {
        identity.idcardimgs = identity.idcardimgs + item.url + ";";
      });
      identity.idcardimgs = identity.idcardimgs.slice(0, -1);

      identity.certificates = "";
      this.identity.certificates.forEach((item) => {
        identity.certificates = identity.certificates + item.url + ";";
      });
      identity.certificates = identity.certificates.slice(0, -1);
      return identity;
    },
    //出生日期
    birthday() {
      if (!this.verifyIdCard(this.identity.idcard)) {
        return null;
      }
      var year = parseInt(this.identity.idcard.substring(6, 10), 10);
      var month = parseInt(this.identity.idcard.substring(10, 12), 10) - 1; // 月份从 0 开始，所以需要减去 1
      var day = parseInt(this.identity.idcard.substring(12, 14), 10);

      return new Date(year, month, day);
    },
  },
  data() {
    return {
      sexOptions: [
        {
          value: 1,
          label: "男",
        },
        {
          value: 0,
          label: "女",
        },
      ],
      isLegalName: true,
      isLegalIdCard: true,
      //个人信息
      identity: {
        name: "", //姓名
        sex: 1, //性别：1男 ，0女
        idcard: "", //身份证号
        idcardimgs: [], //身份证
        certificates: [], //资格证书
      },
      idcardfiles: [],
      certificatesfiles: [],
    };
  },
  methods: {
    //移除身份证图片回调
    handleCardImgRemove(file, fileList) {
      console.log(file, fileList);
      this.removeIdCard(file.response.fileName);
    },
    //移除资格证书图片回调
    handleCertificateRemove(file, fileList) {
      console.log(file, fileList);
      this.removeCertificate(file.response.fileName);
    },
    //上传身份证成功回调
    uploadIdCardImgsSuccess(response, file, fileList) {
      let pre = this.$store.getters.getIdentityImg;
      let img = pre + response.fileName;
      let myfile = {
        name: response.fileName,
        url: img,
      };
      this.identity.idcardimgs.push(myfile);
    },
    //上传资格证书成功回调
    uploadCertificatesSuccess(response, file, fileList) {
      let pre = this.$store.getters.getIdentityImg;
      let img = pre + response.fileName;
      let myfile = {
        name: response.fileName,
        url: img,
      };
      this.identity.certificates.push(myfile);
    },
    //移除列表中name为nameToRemove的对象
    removeIdCard(nameToRemove) {
      this.identity.idcardimgs = this.identity.idcardimgs.filter(
        (item) => item.name !== nameToRemove
      );
    },
    //移除列表中name为nameToRemove的对象
    removeCertificate(nameToRemove) {
      this.identity.certificates = this.identity.certificates.filter(
        (item) => item.name !== nameToRemove
      );
    },
    verifyIdCard(identityNum) {
      // 正则表达式  身份证号18位
      // 1-8{2}  身份证前两位代表省直辖市自治区 没有0和9
      var isIdentityNum =
        /^[1-8]{2}[0-9]{4}[0-9]{4}((0[1-9]{1})|(1[0-2]{1}))((0[1-9]{1})|(1[0-9]{1})|(2[0-9]{1})|(3[0-1]{1}))[0-9]{3}[0-9xX]{1}$/;
      return isIdentityNum.test(identityNum);
    },
    //验证名字合法性
    verifyName(name) {
      var isName = /^[\u4e00-\u9fa5]{2,6}$/gi;
      return isName.test(name);
    },
    //验证提交数据
    submitDataVerify() {
      if (!this.verifyName(this.identity.name)) {
        this.$message({
          type: "error",
          message: "姓名格式非法",
        });
        return false;
      }
      if (!this.verifyIdCard(this.identity.idcard)) {
        this.$message({
          type: "error",
          message: "身份证格式非法",
        });
        return false;
      }
      if (this.identity.idcardimgs.length <= 0) {
        this.$message({
          type: "error",
          message: "请先上传身份证",
        });
        return false;
      }
      if (this.identity.certificates.length <= 0) {
        this.$message({
          type: "error",
          message: "请先上传资格证书",
        });
        return false;
      }
      return true;
    },
    //提交申请
    submitApply() {
      if (!this.submitDataVerify()) {
        return;
      } else {
        //发送请求改变用户状态
        this.$request.postHttp({
          url: "/consultapply/addConsultApply",
          data: this.submitData,
          success: (data) => {
            this.$message({
              type: data.code == 200 ? "success" : "error",
              message: data.msg,
            });
          },
          error: (error) => {},
        });
      }
    },
  },
};
</script>

<style scoped>
.my-flex {
  display: flex;
  align-items: center;
}
</style>